@import "src/app/styles/colors";
@import "src/app/styles/font";

.visits-chart {
  display: flex;
  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
  height: 192px;
  flex-direction: column;
  justify-content: space-between;

  &__header {
    align-items: center;
    color: $grey;
    display: flex;
    justify-content: space-between;

    span {
      cursor: pointer;

      &:focus {
        outline: none
      }

    }
  }

  &__title {
    font-size: 20px;
    font-weight: $fw-lighter;
    margin: 0;
    line-height: 40px;
  }

  &__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 75%;

    &-info {
      align-items: center;
      display: flex;
      height: 96px;
      justify-content: space-between;

      &-title {
        margin: 0;
        font-weight: $fw-lighter;
        font-size: $fs-large;
        line-height: 1.5;
        letter-spacing: 0.15px;
        color: $dark-grey;
      }

      &-chart {
        margin-left: 16px;
      }
    }

    &-stats {
      display: flex;
      justify-content: space-between;

      &-title {
        margin: 0;
        color: $grey;
        font-weight: $fw-lighter;
        font-size: $fs-small;
      }

      &-data {
        margin: 0;
        line-height: 1.5;
        font-weight: $fw-lighter;
        font-size: $fs-medium;
        color: $dark-grey;
      }
    }
  }
}
